<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>MyPetStore</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script>
        function JoynBackground($move,$sudu){
	var $img_num=$('#JoynBackground').children('img').length;
	var $img_show=1;
	switch($move){
		case 1:
			$("#JoynBackground img").css({width:"120%",height:"120%",top:"-10%",left:"-10%"});
			$("#JoynBackground img[name='1']").css({display:"block"})
			.animate({width:"100%",height:"100%",top:"0",left:"0"},$sudu-1000);
			setInterval(function(){
				$("#JoynBackground img[name='"+$img_show+"']").fadeOut(100);
				$img_show++;$img_show=$img_show>$img_num?'1':$img_show;
				$("#JoynBackground img[name='"+$img_show+"']").css({width:"120%",height:"120%",top:"-10%",left:"-10%"}).fadeIn(1000)
				.animate({width:"100%",height:"100%",top:"0",left:"0"},$sudu-1000);
			},$sudu);
		break;
		case 2:
			$("#JoynBackground img[name='1']").css({display:"block"})
			.animate({width:"120%",height:"120%",top:"-10%",left:"-10%"},$sudu-1000);
			setInterval(function(){
				$("#JoynBackground img[name='"+$img_show+"']").fadeOut(100);
				$img_show++;$img_show=$img_show>$img_num?'1':$img_show;
				$("#JoynBackground img[name='"+$img_show+"']").css({width:"100%",height:"100%",top:"0%",left:"0%"}).fadeIn(1000)
				.animate({width:"120%",height:"120%",top:"-10%",left:"-10%"},$sudu-1000);
			},$sudu);
		break;
		case 3:
			$("#JoynBackground img[name='1']").css({display:"block"});
			setInterval(function(){
				$("#JoynBackground img[name='"+$img_show+"']").fadeOut($sudu);
				$img_show++;$img_show=$img_show>$img_num?'1':$img_show;
				$("#JoynBackground img[name='"+$img_show+"']").fadeIn($sudu);
			},$sudu);
		break;
	}
}
    </script>
    <script>
        $(document).ready(function () {
            JoynBackground(2, 5000); //场景动画类型和时间
            /* 场景动画类型：【1】拉近【2】拉远【3】幻灯片显示 */
        })
    </script>
    <style>
        #Content {
            background-image: url(../images/del.png);
            text-align: center;
            margin: 300px auto;
            padding: 20px;
            width: 60%;
            border-radius: 30px;
        }
    </style>
</head>

<body>
    <div id="Content">
        <h2>
            Welcome to MyPetStore
        </h2>
        <p><a href="../view/catalog-main.html">Enter the Store</a> </p>
        <p><sub>Copyright Central South University</sub></p>
    </div>
    <!-- 背景 -->
    <div id="JoynBackground">
        <img src="<%= require('../images/1.jpg') %>" name="1" />
        <img src="<%= require('../images/2.jpg') %>" name="2" />
        <img src="<%= require('../images/3.jpg') %>" name="3" />
        <img src="<%= require('../images/4.jpg') %>" name="4" />
        <img src="<%= require('../images/5.jpg') %>" name="5" />
    </div>
    <!-- 背景 -->
</body>

</html>